<template>
  <view class="personal">
    <view class="personal-box">
      <!-- 头像个人信息 -->
      <view class="personal-box-top">
        <view class="share">
          <!-- <button data-name="shareBtn" open-type="share">
            马上分享<u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
          </button> -->
        </view>
        <view class="info">
          <view class="info-avatar">
            <button @click="loginTest">
            <image :src="memberInfo.memberAvatar" mode=""></image>
            </button>
          </view>
          <view class="info-center">
            <view class="info-name">
              <text v-if="!memberInfo.memberName">XXXX</text>
              <text v-else>{{memberInfo.memberName}}</text>
            </view>
            <view class="info-iphone">
              <text>{{memberInfo.memberMobile}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- List列表 -->
      <view class="personal-box-center">
        <view class="list">
          <view class="item" @click="goCoupon">
            <view class="grid">
              <view class="column left">
                <text>优惠券</text>
              </view>
              <view class="column right">
                <text style="padding-right: 16rpx;"
                  >{{couponCount}}张可用</text><u-icon
                    name="arrow-right"
                    color="#CCC"
                    size="28"
                  ></u-icon
                >
              </view>
            </view>
          </view>
          <view class="item" @click="addLiaison">
            <view class="grid">
              <view class="column left">
                <text class="">联系人</text>
              </view>
              <view class="column right">
                <u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
              </view>
            </view>
          </view>
          <view class="item" @click="goFeedback">
            <view class="grid">
              <view class="column left">
                <text class="">意见反馈</text>
              </view>
              <view class="column right">
                <u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
              </view>
            </view>
          </view>
          <view class="item" @click="gohelpNotes">
            <view class="grid">
              <view class="column left">
                <text class="">帮助说明</text>
              </view>
              <view class="column right">
                <u-icon
                  u-icon
                  name="arrow-right"
                  color="#CCC"
                  size="28"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
        <button class="listButton"  @click="bowOut">退出登录</button>
      </view>
      <collocation />
    </view>
  </view>
</template>

<script>
import { mapActions,mapState } from 'vuex';
import collocation from "@/components/person/collocation.vue";

export default {
  components: { collocation },
  data() {
    return {
      data: {
        loading: false,
        userInfo:{},
        defaultAvatar:true,
        memberAvatar:false,
        memberMobile:null,
        
      },
    };
  },
  onLoad() {
    this.getUserInfo()
    this.getCouponCount()
  },
  // onShareAppMessage: function(e) {
  //   return {
  //     title: '国药商城,7*24小时服务,支持自取药品',
  //     desc:'国药商城,7*24小时服务,支持自取药品',
  //     path: 'pages/index/home',
  //   }
  // },
  computed:{
    ...mapState({
      userinformation: state => state.person.userinformation,
      memberInfo:state => state.person.memberInfo,
      couponCount:state => state.person.couponCount
    }),
  },
  methods: {
		...mapActions(['ActChangeMemberBaseInfo','ActGetMemberInfo','AcTGetCouponCount']),
		loginTest(){
			uni.getUserProfile({
				desc:'登录',
				success:async(res)=>{
					console.log('用户信息',res.userInfo);
          this.userInfo = res.userInfo
          const reqBody = {
            memberAvatar:res.userInfo.avatarUrl,
            memberBirthday:'',
            memberName:res.userInfo.nickName,
            memberSex:res.userInfo.gender
          }
          await this.ActChangeMemberBaseInfo(reqBody)
          await this.$store.dispatch('ActGetMemberInfo')
				},
				fail:(res)=>{
				}
			})
		},
    async getUserInfo(){
      await this.ActGetMemberInfo() 
    },
    async getCouponCount (){
      await this.AcTGetCouponCount()
    },
    goCoupon() {
      this.$u.route('/pages/person/coupon')
    },
    addLiaison() {
      this.$u.route('/pages/person/liaison')
    },
    goFeedback() {
      this.$u.route('/pages/person/feedback')
    },
    gohelpNotes() {
      this.$u.route('/pages/person/helpNotes')
    },
    bowOut() {
      uni.removeStorageSync("token");
      uni.removeStorageSync("refresh_token");
      uni.removeStorageSync("userInfo");
	  uni.removeStorageSync('wxUserInfo');
      uni.removeStorageSync("loginEffectTime");
      uni.removeStorageSync("storeInfo");
      uni.removeStorageSync("storeId");
      uni.removeStorageSync("historyList");
      this.$u.route({
        url: "pages/user/login",
        type: "reLaunch",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}
.personal {
  position: relative;
  height: 100%;
  background: linear-gradient(
    180deg,
    $u-type-primary 0%,
    $u-type-primary 20%,
    #f6f6f6 40%
  );
  // overflow: hidden;

  .personal-box {
    padding: 0 24rpx;
  }

  .personal-box-top {
    position: relative;

    .share {
      position: absolute;
      top: 16rpx;
      right: -24rpx;
      // border-top-left-radius: 120rpx;
      // border-bottom-left-radius: 120rpx;
      // background-color: rgba(0, 0, 0, 0.6);
      padding-right: 20rpx;
      button {
        position: relative;
        right: -20rpx;
        width: 158rpx;
        height: 48rpx;
        line-height: 48rpx;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        background-color: rgba(0, 0, 0, 0.41);
        border-top-left-radius: 200rpx;
        border-bottom-left-radius: 200rpx;
        font-size: 24rpx;
        color: #fff;
        padding: 0 16rpx;

        u-icon {
          margin-left: 10rpx;
        }

        // background-color: green;
      }
      // a {
      //   display: inline-block;
      //   font-size: 24rpx;
      //   color: #fff;
      //   padding: 6rpx 16rpx;
      // }
    }

    .info {
      display: flex;
      align-items: center;
      color: #ffffff;
      width: 100%;

      .info-avatar {
        padding: 24rpx;
        button {
          height: 140rpx;
          display: inline-block;
          border: none;
          box-shadow: none;
          border-radius: none;
          background: transparent;
          padding: 0;
          margin: 0;
          &::after {
            display: none;
          }
        }
        image {
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
          overflow: hidden;
        }
      }

      .info-center {
        padding: 16rpx;

        .info-name {
          margin-bottom: 8rpx;

          text {
            font-size: 30rpx;
            font-weight: 500;
          }
        }

        .info-iphone {
          text {
            font-size: 26rpx;
          }
        }
      }
    }
  }

  .personal-box-center {
    position: relative;
    color: #333;
    padding-top: 24rpx;
    .list {
      border-radius: 16rpx;
      overflow: hidden;

      .item {
        background-color: #fff;
        border-bottom: 1rpx solid #f6f6f6;
        padding: 28rpx 24rpx;

        .grid {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .column {
            font-size: 28rpx;
            // text {
            //   font-size: 28rpx;
            // }
          }
        }
      }
    }
    button {
      margin-top: 32rpx;
      color: $u-type-primary;
      background-color: #fff;
      border: none;
      &::after {
        display: none;
      }
    }
  }
}
</style>
